<template>
  <view class="content">
    <map id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" class="maps"></map>
	<view class="lines-box">
		<view class="list-box">
			<view class="top-box">
				<view class="left">
					<view class="imgs">
						<image src="/static/img/bus.png" mode="widthFix"></image>
					</view>
					<view class="texts">
						<text class="top-title">金属工厂</text>
						<text class="top-title En">Metal Plant</text>
					</view>
				</view>
				<view class="right">
					<text class="top-title">240 M</text>
				</view>
			</view>
			<view class="bus-box">
				<view class="item-box">
					<view class="cn">
						<text>金属</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>胶架</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>零件</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>物流中心</text>
					</view>
					<view class="en">
						<text>Metal</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Acetate</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Decoration</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>DC</text>
					</view>
				</view>
				<view class="item-box">
					<view class="cn second">
						<text>30秒</text>
					</view>
					<view class="en">
						<text>30s</text>
					</view>
				</view>
				<view class="item-box">
					<image src="/static/img/star.png" class="star" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="step">
				<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
			</view>
		</view>
		<view class="list-box">
			<view class="top-box">
				<view class="left">
					<view class="imgs">
						<image src="/static/img/bus.png" mode="widthFix"></image>
					</view>
					<view class="texts">
						<text class="top-title">金属工厂</text>
						<text class="top-title En">Metal Plant</text>
					</view>
				</view>
				<view class="right">
					<text class="top-title">240 M</text>
				</view>
			</view>
			<view class="bus-box">
				<view class="item-box">
					<view class="cn">
						<text>金属</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>胶架</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>零件</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>物流中心</text>
					</view>
					<view class="en">
						<text>Metal</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Acetate</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Decoration</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>DC</text>
					</view>
				</view>
				<view class="item-box">
					<view class="cn second">
						<text>30秒</text>
					</view>
					<view class="en">
						<text>30s</text>
					</view>
				</view>
				<view class="item-box">
					<image src="/static/img/stard9.png" class="star" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="top-box">
				<view class="left">
					<view class="imgs">
						<image src="/static/img/bus.png" mode="widthFix"></image>
					</view>
					<view class="texts">
						<text class="top-title">金属工厂</text>
						<text class="top-title En">Metal Plant</text>
					</view>
				</view>
				<view class="right">
					<text class="top-title">240 M</text>
				</view>
			</view>
			<view class="bus-box">
				<view class="item-box">
					<view class="cn">
						<text>金属</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>胶架</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>零件</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>物流中心</text>
					</view>
					<view class="en">
						<text>Metal</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Acetate</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Decoration</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>DC</text>
					</view>
				</view>
				<view class="item-box">
					<view class="cn second">
						<text>30秒</text>
					</view>
					<view class="en">
						<text>30s</text>
					</view>
				</view>
				<view class="item-box">
					<image src="/static/img/star.png" class="star" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="top-box">
				<view class="left">
					<view class="imgs">
						<image src="/static/img/bus.png" mode="widthFix"></image>
					</view>
					<view class="texts">
						<text class="top-title">金属工厂</text>
						<text class="top-title En">Metal Plant</text>
					</view>
				</view>
				<view class="right">
					<text class="top-title">240 M</text>
				</view>
			</view>
			<view class="bus-box">
				<view class="item-box">
					<view class="cn">
						<text>金属</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>胶架</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>零件</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>物流中心</text>
					</view>
					<view class="en">
						<text>Metal</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Acetate</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>Decoration</text>
						<image src="/static/img/arrow-right.png" class="arrow-right" mode="widthFix"></image>
						<text>DC</text>
					</view>
				</view>
				<view class="item-box">
					<view class="cn second">
						<text>30秒</text>
					</view>
					<view class="en">
						<text>30s</text>
					</view>
				</view>
				<view class="item-box">
					<image src="/static/img/stard9.png" class="star" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			latitude: 39.908823, 
			longitude: 116.397470,
			scale: 16,
		}
	},
	methods: {
		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					this.latitude = res.latitude
					this.longitude = res.longitude
				},
				fail: err => {
					uni.showToast({
						title: '获取位置失败',
						icon: 'none'
					})
					console.error('定位失败:', err)
				}
			})
		}
	},
	onLoad() {
		// this.getLocation()
	}
}
</script>
<style>
	.content{display: flex;flex-direction: column;height: 100vh;}
	.maps{width: 100%;flex: 1;}
	.lines-box{width: 100%;background: #fff;height: 70vh;position: absolute;bottom: 0;border-top-right-radius: 10px;border-top-left-radius: 20px;padding-top: 10px;}
	.list-box{display: flex;flex-direction: column;padding-top: 10px;}
	.top-box{display: flex;flex-direction: row;justify-content: space-between;}
	.top-box .left{display: flex;flex-direction: row;align-items: center;gap: 10px;margin-left: 20px;justify-content: start;gap: 10px;}
	.top-box .left .texts .top-title{color: #000;font-weight: 600;font-size: 14px;}
	.top-box .left .texts .En{color: #7C643C;font-size: 12px;font-weight: 400;margin-left: 5px;}
	.top-box .right .top-title{color: #7C643C;font-size: 14px;font-weight: 400;margin-left: 5px;}
	.top-box .right{margin-right: 20px;}
	.imgs{display: flex;align-items: center;justify-content: center;background: #7C643C;width: 30px;height: 30px;border-radius: 30px;}
	.imgs image{width: 20px;}
	.bus-box{display: flex;flex-direction: row;justify-content: space-between;padding: 10px 20px 0 20px;align-items: center;border-bottom: 1px solid #D9D9D9;padding-bottom: 10px;}
	.item-box .cn,.en{display: flex;flex-direction: row;align-items: center;gap: 3px;}
	.item-box .en{margin-top: 5px;}
	.item-box .en text{color: #7C643C;font-size: 12px;}
	.item-box .cn text{color: #7C643C;font-size: 14px;}
	.item-box .second{width: 40px;}
	.item-box .star{width: 30px;}
	.arrow-right{width: 20px;}
	.step{width: 100%;padding-top: 30px;border-bottom: 1px solid #D9D9D9;}
</style>